<template>
    <div class="receive-register-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>
              <el-input v-model="searchKeyword" placeholder="搜索通知单号" size="small"
                style="width: 200px; margin-right: 10px" @input="filterTable" />
              <el-select v-model="filterStatus" placeholder="筛选状态" size="small" clearable
                style="width: 160px; margin-right: 10px" @change="filterTable">
                <el-option label="未入库" value="未入库" />
                <el-option label="已入库" value="已入库" />
              </el-select>
              <el-button type="primary" icon="Plus" @click="openDialog">新增登记</el-button>
              <el-button icon="Download" @click="exportTable">导出</el-button>
            </div>
          </div>
        </template>
  
        <el-table :data="filteredData" border>
          <el-table-column prop="noticeId" label="通知单号" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="productCode" label="商品编码" />
          <el-table-column prop="storageCode" label="储位编码" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="batchNumber" label="批次号" />
          <el-table-column prop="receivedDate" label="收货日期" />
          <el-table-column prop="receiveModeCode" label="接货方式编号" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="已入库"
                inactive-value="未入库"
                @change="toggleStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.noticeId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog v-model="dialogVisible" title="收货登记" width="600px">
        <el-form :model="form" label-width="100px">
          <el-form-item label="通知单号">
            <el-input v-model="form.noticeId" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.productName" />
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="form.productCode" />
          </el-form-item>
          <el-form-item label="储位编码">
            <el-input v-model="form.storageCode" />
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.quantity" type="number" />
          </el-form-item>
          <el-form-item label="批次号">
            <el-input v-model="form.batchNumber" />
          </el-form-item>
          <el-form-item label="收货日期">
            <el-date-picker v-model="form.receivedDate" type="date" style="width: 100%" />
          </el-form-item>
          <el-form-item label="接货方式编号">
            <el-input v-model="form.receiveModeCode" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  
  const searchKeyword = ref('')
  const filterStatus = ref('')
  const dialogVisible = ref(false)
  
  interface Receive {
    noticeId: string
    productName: string
    productCode: string
    storageCode: string
    quantity: number
    batchNumber: string
    receivedDate: string
    receiveModeCode: string
    status: '已入库' | '未入库'
  }
  
  const rawData = ref<Receive[]>([
    {
      noticeId: 'NT20240501-008', productName: '涂料油漆',
      productCode: 'TL-974', storageCode: 'A01',
      quantity: 81, batchNumber: 'BN-8002',
      receivedDate: '2024-05-07', status: '未入库',
      receiveModeCode: 'RM03'
  },
    {
      noticeId: 'NT20240501-004', productName: '空调设备',
      productCode: 'KT-567', storageCode: 'B01',
      quantity: 41, batchNumber: 'BN-3342',
      receivedDate: '2024-05-02', status: '未入库',
      receiveModeCode: 'RM04'
  },
    {
      noticeId: 'NT20240501-006', productName: '空调设备',
      productCode: 'KT-485', storageCode: 'C03',
      quantity: 26, batchNumber: 'BN-7983',
      receivedDate: '2024-05-04', status: '未入库',
      receiveModeCode: 'RM04'
  },
    {
      noticeId: 'NT20240501-010', productName: '照明设备',
      productCode: 'ZM-738', storageCode: 'E02',
      quantity: 22, batchNumber: 'BN-6721',
      receivedDate: '2024-05-01', status: '已入库',
      receiveModeCode: 'RM03'
  },
    {
      noticeId: 'NT20240501-002', productName: '建筑钢材',
      productCode: 'JG-277', storageCode: 'E02',
      quantity: 34, batchNumber: 'BN-5929',
      receivedDate: '2024-05-06', status: '已入库',
      receiveModeCode: 'RM03'
  },
    {
      noticeId: 'NT20240501-007', productName: '涂料油漆',
      productCode: 'TL-346', storageCode: 'B01',
      quantity: 53, batchNumber: 'BN-4845',
      receivedDate: '2024-05-01', status: '未入库',
      receiveModeCode: 'RM01'
  },
    {
      noticeId: 'NT20240501-005', productName: '涂料油漆',
      productCode: 'TL-887', storageCode: 'D05',
      quantity: 75, batchNumber: 'BN-8240',
      receivedDate: '2024-05-04', status: '未入库',
      receiveModeCode: 'RM02'
  },
    {
      noticeId: 'NT20240501-001', productName: '涂料油漆',
      productCode: 'TL-760', storageCode: 'E02',
      quantity: 87, batchNumber: 'BN-2683',
      receivedDate: '2024-05-06', status: '已入库',
      receiveModeCode: 'RM03'
  },
    {
      noticeId: 'NT20240501-003', productName: '空调设备',
      productCode: 'KT-737', storageCode: 'B01',
      quantity: 38, batchNumber: 'BN-3792',
      receivedDate: '2024-05-06', status: '已入库',
      receiveModeCode: 'RM02'
  },
    {
      noticeId: 'NT20240501-007', productName: '建筑钢材',
      productCode: 'JG-490', storageCode: 'D05',
      quantity: 67, batchNumber: 'BN-4844',
      receivedDate: '2024-05-04', status: '未入库',
      receiveModeCode: 'RM01'
  },
    {
      noticeId: 'NT20240501-006', productName: '涂料油漆',
      productCode: 'TL-714', storageCode: 'E02',
      quantity: 81, batchNumber: 'BN-5189',
      receivedDate: '2024-05-04', status: '已入库',
      receiveModeCode: 'RM01'
  },
    {
      noticeId: 'NT20240501-007', productName: '涂料油漆',
      productCode: 'TL-744', storageCode: 'B01',
      quantity: 95, batchNumber: 'BN-8009',
      receivedDate: '2024-05-04', status: '未入库',
      receiveModeCode: 'RM02'
  },
    {
      noticeId: 'NT20240501-008', productName: '涂料油漆',
      productCode: 'TL-555', storageCode: 'D05',
      quantity: 43, batchNumber: 'BN-2536',
      receivedDate: '2024-05-02', status: '未入库',
      receiveModeCode: 'RM03'
  },
    {
      noticeId: 'NT20240501-002', productName: '建筑钢材',
      productCode: 'JG-269', storageCode: 'C03',
      quantity: 63, batchNumber: 'BN-6050',
      receivedDate: '2024-05-02', status: '已入库',
      receiveModeCode: 'RM05'
  },
    {
      noticeId: 'NT20240501-005', productName: '空调设备',
      productCode: 'KT-289', storageCode: 'D05',
      quantity: 97, batchNumber: 'BN-6406',
      receivedDate: '2024-05-02', status: '已入库',
      receiveModeCode: 'RM01'
  }
  ])
  const filteredData = ref([...rawData.value])
  
  const form = ref<Receive>({
    noticeId: '', productName: '', productCode: '', storageCode: '',
    quantity: 0, batchNumber: '', receivedDate: dayjs().format('YYYY-MM-DD'),
    receiveModeCode: '', status: '未入库'
  })
  
  function openDialog() {
    Object.assign(form.value, {
      noticeId: '', productName: '', productCode: '', storageCode: '',
      quantity: 0, batchNumber: '', receivedDate: dayjs().format('YYYY-MM-DD'),
      receiveModeCode: '', status: '未入库'
    })
    dialogVisible.value = true
  }
  
  function editRow(row: Receive) {
    form.value = { ...row }
    dialogVisible.value = true
  }
  
  function saveForm() {
    const index = rawData.value.findIndex(item => item.noticeId === form.value.noticeId && item.productCode === form.value.productCode)
    if (index > -1) {
      rawData.value[index] = { ...form.value }
    } else {
      rawData.value.push({ ...form.value })
    }
    filterTable()
    dialogVisible.value = false
  }
  
  function deleteRow(noticeId: string) {
    rawData.value = rawData.value.filter(item => item.noticeId !== noticeId)
    filterTable()
  }
  
  function toggleStatus(row: Receive) {
    const index = rawData.value.findIndex(item => item.noticeId === row.noticeId && item.productCode === row.productCode)
    if (index !== -1) {
      rawData.value[index].status = row.status
      filterTable()
    }
  }
  
  function filterTable() {
    filteredData.value = rawData.value.filter(item => {
      const matchKeyword = item.noticeId.toLowerCase().includes(searchKeyword.value.toLowerCase())
      const matchStatus = filterStatus.value ? item.status === filterStatus.value : true
      return matchKeyword && matchStatus
    })
  }
  
  function exportTable() {
    const rows = filteredData.value
    const headers = ['通知单号','商品名称','商品编码','储位编码','数量','批次号','收货日期','接货方式编号','状态']
    const keys = ['noticeId','productName','productCode','storageCode','quantity','batchNumber','receivedDate','receiveModeCode','status']
    const csv = [
      headers.join(','),
      ...rows.map(row => keys.map(key => row[key as keyof Receive]).join(','))
    ].join('\n')
  
    const blob = new Blob([csv.replace(/\\n/g, '\n')], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '收货登记数据.csv'
    link.click()
  }
  </script>
  
  <style scoped>
  .receive-register-container {
    padding: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
  